/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles/foundation' as foundation;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

$toggle-width: 2.4 * styles.$base-size;
$toggle-height: 1.6 * styles.$base-size;
$handle-size: 1.2 * styles.$base-size;
$handle-offset: 0.2 * styles.$base-size;
$shadow-color: rgba(0, 0, 0, 0.25);

.root {
  @include styles.styles-reset;
  display: flex;
}

.outline {
  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);

  @include styles.focus-highlight(
    $gutter: 2px,
    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
    $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
  );
}

.toggle-control {
  // this is a "drawing" element, and therefore we want it (and children) to retain
  // background colors in high-contrast/forced-color mode
  forced-color-adjust: none;
  @include styles.make-control-size($toggle-height, $toggle-width);
  background: awsui.$color-background-toggle-default;
  border-start-start-radius: 0.8 * styles.$base-size;
  border-start-end-radius: 0.8 * styles.$base-size;
  border-end-start-radius: 0.8 * styles.$base-size;
  border-end-end-radius: 0.8 * styles.$base-size;
  &-checked {
    background: awsui.$color-background-control-checked;
  }
  &-disabled {
    background: awsui.$color-background-control-disabled;
    &.toggle-control-checked {
      background: awsui.$color-background-toggle-checked-disabled;
    }
  }
  &-readonly {
    background: awsui.$color-background-control-disabled;
  }
}

.toggle-handle {
  display: block;
  position: absolute;
  border-start-start-radius: 0.6 * styles.$base-size;
  border-start-end-radius: 0.6 * styles.$base-size;
  border-end-start-radius: 0.6 * styles.$base-size;
  border-end-end-radius: 0.6 * styles.$base-size;
  background: awsui.$color-foreground-control-default;
  box-shadow: 1px 1px $shadow-color;
  inline-size: $handle-size;
  block-size: $handle-size;
  inset-block-start: $handle-offset;
  inset-inline-start: $handle-offset;

  @include styles.with-motion {
    // Exception: The toggle state transition does not follow the motion guidelines
    // for the "State transition (quick)" group and is therefore not using
    // standard variables from that group.
    transition:
      transform awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart,
      background-color awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart;
  }

  &-checked {
    transform: translateX(0.8 * styles.$base-size);

    @include styles.with-direction('rtl') {
      transform: translateX(-0.8 * styles.$base-size);
    }
  }

  &-disabled {
    background: awsui.$color-foreground-control-disabled;
    box-shadow: none;
  }

  &-readonly:not(&-disabled) {
    box-shadow: none;
    &.toggle-handle-checked {
      background: awsui.$color-foreground-control-read-only;
    }
  }
}
